<template>
	<view class="content">
		<div class="page-header">
			<div style="width: 100%;display: flex;align-items: center;margin-top: 10rpx;">
				<picker @change="bindPickerChange" :value="index" :range="addresslist">
					<div class="areaSelect">
						<span style="margin-right: 20rpx;" v-if="addresslist.length">{{addresslist[index]}}</span>
					</div>
				</picker>
				<div class="search-box">
					<div class="btn">
						<i class="Ticonfont Ticon-sousuo"></i>
					</div>
					<uni-easyinput primaryColor='#17bf8b' :styles="{'background':'#f1f1f1'}" :inputBorder="false" type="text"
						v-model="data.keywords" placeholder="请输入关键词" @confirm="keywords" />
				</div>
			</div>
			<div style="width: 100%;">
				<uv-tabs lineColor="rgba(23, 191, 139, 1)" :list="industrylist" @click="typeChange"
					:current='current'></uv-tabs>
			</div>
		</div>
		<div style="height: 220rpx;"></div>
		<swiper class="swiper" circular='true' indicator-dots="true" previous-margin="40rpx" next-margin="40rpx"
			indicator-color="rgba(23, 191, 139, .3)" indicator-active-color="rgba(23, 191, 139, 1)" autoplay='true'>
			<swiper-item v-for="(item, index) in info">
				<div class="swiper-img" @click="TanPreviewImage(index)">
					<image style="width: 100%;height: 100%;" :src="item" alt="" mode="aspectFill" />
				</div>
			</swiper-item>
		</swiper>

		<div class="navlist-box" style="width: 100%;">
			<div class="nav-item" v-for="(item,i) in cateNavs" :key='i' @click="cateto(item.id)">
				<image style="width: 88rpx;height: 88rpx;" :src="item.image" alt="" mode="aspectFill" />
				<div class="title">{{item.title}}</div>
			</div>
			<div class="nav-item" @click="goToClass()">
				<image style="width: 88rpx;height: 88rpx;" src="/static/images/nav-icon/nav-icon15.png" alt=""
					mode="aspectFill" />
				<div class="title">全部</div>
			</div>
		</div>
		<view class="top3">
			<view class="top3-tit">
				<text><text class="red">最新</text>公司列表</text>
			</view>
			<uni-card v-if="list.length" :title="item.company_name" :sub-title="item.address" v-for="(item,key) in list"
				@click="gotoDetails(item.id)">
				<text class="v-h1">分类：{{item.industry_name}}</text>
				<text class="v-h1">经营范围：{{item.businessscope ? item.businessscope : ''}}</text>
			</uni-card>
			<view class="noInfo" v-if="!list.length">
				<i class="Ticonfont Ticon-zanwushuju"></i>
				<span>暂无数据</span>
			</view>
		</view>
		<FootTabbar :currentIndex='0' />
	</view>
</template>

<script>
	import FootTabbar from '@/components/foot-tabbar/foot-tabbar.vue'
	import $store from '@/store/index.js';
	export default {
		components: {
			FootTabbar
		},
		data() {
			return {
				indicator: false,
				title: 'Hello',
				list: [],
				current: 0, //默认下标
				selectid: null,
				data: {
					size: 10,
					page: 1,
					address: '',
					classification: '',
					keywords: '',
					address_text: "",
				},
				info: ['http://scny.nclavi.com/img/banner1.jpg', 'http://scny.nclavi.com/img/banner2.jpg',
					'http://scny.nclavi.com/img/banner3.jpg', 'http://scny.nclavi.com/img/banner4.jpg'
				],
				searchValue: null,
				index: 0,
				type: 'center',
				selectid: 1,
				industrylist: [],
				addresslist: [],
				cateNavs: [{
						id: 10001,
						url: '',
						image: '/static/images/nav-icon/nav-icon1.png',
						title: '协会简介',
					},
					{
						id: 10002,
						url: '',
						image: '/static/images/nav-icon/nav-icon2.png',
						title: '水稻服务',
					},
					{
						id: 10003,
						url: '',
						image: '/static/images/nav-icon/nav-icon3.png',
						title: '农资服务',
					}, {
						id: 10004,
						url: '',
						image: '/static/images/nav-icon/nav-icon4.png',
						title: '农机服务',
					},
					{
						id: 10005,
						url: '',
						image: '/static/images/nav-icon/nav-icon5.png',
						title: '百合技术',
					},

					{
						id: 10006,
						url: '',
						image: '/static/images/nav-icon/nav-icon6.png',
						title: '水产技术',
					},
					{
						id: 10007,
						url: '',
						image: '/static/images/nav-icon/nav-icon7.png',
						title: '药材技术',
					},
					{
						id: 10008,
						url: '',
						image: '/static/images/nav-icon/nav-icon8.png',
						title: '食品加工',
					},
					{
						id: 10009,
						url: '',
						image: '/static/images/nav-icon/nav-icon9.png',
						title: '果树技术',
					},

					// {
					// 	url: '',
					// 	image: '/static/images/nav-icon/nav-icon10.png',
					// 	title: '绿色循环',
					// },
					// {
					// 	url: '',
					// 	image: '/static/images/nav-icon/nav-icon11.png',
					// 	title: '销售帮助',
					// },
					// {
					// 	url: '',
					// 	image: '/static/images/nav-icon/nav-icon12.png',
					// 	title: '打印服务',
					// },
					// {
					// 	url: '',
					// 	image: '/static/images/nav-icon/nav-icon13.png',
					// 	title: '会计服务',
					// },
					// {
					// 	url: '',
					// 	image: '/static/images/nav-icon/nav-icon14.png',
					// 	title: '法律咨询',
					// }
				],
			}
		},
		onShow() {

		},
		onLoad() {
			this.getlist();
			this.getstate();
		},
		methods: {
			getlist() {
				uni.showLoading({
					title: '加载中'
				});
				this.status = 'loading'
				this.$H.post('/company/list', this.data).then(res => {
					this.status = 'loadmore'

					uni.hideLoading();

					res.data.list.data.forEach(item => {
						this.list.push(item);
					});
					this.data.page++;
				})
				this.$H.get('/company/industrylist', this.data).then(res => {
					res.data.list.forEach(v => {
						v.name = v.label
					})
					this.industrylist = res.data.list
					this.industrylist.unshift({
						name: '全部',
						value: 'null'
					})
				})
				this.$H.get('/company/clomeaddresslist', this.data).then(res => {
					this.addresslist = res.data.list
				})
			},
			getstate() {
				this.$H.get('/company/state').then(res => {
					$store.commit('setisAdd', res.data.state)
				})
			},

			onReachBottom() {
				this.getlist();
			},
			input(res) {
				console.log('----input:', res)
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// industryclick() {
			// 	console.log("关闭")
			// 	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			// 	this.$refs.popup.close();
			// 	this.data.page = 1;
			// 	this.list = [];
			// 	this.getlist();
			// },
			bindPickerChange(e) {
				this.data.address_text = this.addresslist[e.detail.value];
				this.index = e.detail.value

				this.data.page = 1;
				this.list = [];
				this.getlist();
			},
			// 类型选择
			typeChange(e) {
				if (typeof e.value === "number") {
					this.data.classification = e.value;
				} else {
					this.data.classification = '';
				}

				this.selectid = e.value
				this.data.page = 1;
				this.list = [];
				this.getlist();

			},
			change() {

			},
			cateto(id) {
				uni.navigateTo({
					url: '/pages/classify-details/classify-details?id=' + id,
				})
			},
			keywords() {
				this.data.page = 1;
				this.list = [];
				this.getlist();
			},
			// 跳转到公司详情
			gotoDetails(id) {
				uni.navigateTo({
					url: '/pages/company-details/company-details?id=' + id,
				})
			},
			/**
			 * 图片预览功能
			 * @param url_List 图片预览地址 
			 * @param index 预览的图片的索引 
			 */
			TanPreviewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.info
				});
			},

			itemClick() {},
			// 跳转到技术分类
			goToClass() {
				uni.switchTab({
					url: '/pages/classify/classify'
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper {
		width: 100%;
		height: 350rpx;
	}

	.swiper-img {
		padding: 15rpx;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		height: 100%;
		// background: rgba(23, 191, 139, 1);

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.search-box {
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		// border: 1px solid rgba(23, 191, 139, 1);
		padding: 0px 5px;
		margin: 10rpx 0px;
		overflow: hidden;
		flex-grow: 1;
		// background-color: rgba(255, 255, 255, 0.3);
		background: #f1f1f1;
		// color: #fff;

		// width: 100%;
		input {
			background: none;
		}
	}

	.page-header {
		// display: flex;
		// align-items: center;
		position: fixed;
		top: 0px;
		left: 0px;
		background: #fff;
		z-index: 999;
		width: 750rpx;
		padding: 10px 20rpx;
		box-sizing: border-box;
		background: #fff;

		box-shadow: 0 12rpx 10rpx -10rpx rgba(0, 0, 0, .1);
		padding-top: 1px;
		margin-top: -1px;
		// background: rgba(23, 191, 139, 1);
	}

	.areaSelect {
		color: #333;
	}

	.Ticon-shaixuan {
		color: #333;
		// font-size:30rpx;
	}

	.popup-content {
		// z-index: 99999999;
		width: 100%;
		padding-bottom: 100px;
		padding: 0px 20rpx;
		box-sizing: border-box;
		padding-bottom: 120rpx;
		// margin-top: 100rpx;
	}

	.header-type {
		text-align: center;
		line-height: 70rpx;
		color: rgba(23, 191, 139, 1);
		font-weight: bold;
	}

	.type-name {
		color: #333;
	}

	.type-list {
		display: flex;
		flex-wrap: wrap;

		.type-item {
			padding: 0px 20rpx;
			height: 60rpx;
			border-radius: 20rpx;
			text-align: center;
			background: #f5f5f5;
			color: #666;
			text-align: center;
			line-height: 60rpx;
			margin: 10px 10rpx;
			border: 1px solid rgba(23, 191, 139, 0);
		}

		.type-itemon {
			background: rgba(23, 191, 139, 0.1);
			border: 1px solid rgba(23, 191, 139, 1);
		}
	}

	.foot-btnbox {
		height: 70rpx;
		width: 400rpx;
		background: rgba(23, 191, 139, 1);
		border-radius: 20rpx;
		text-align: center;
		line-height: 70rpx;
		margin: 0px auto;
		color: #fff;
	}

	.uni-card {
		width: 690rpx;
		box-sizing: border-box;
		margin: 15rpx auto !important;
		box-sizing: border-box;
	}

	.v-h1 {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
		overflow: hidden;
	}

	.navlist-box {
		// padding: 10rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}


	.top3 {
		word-break: break-all;
		padding: 0 30rpx;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.top3 .top3-tit {
		font-size: 38rpx;
		font-weight: 500;
		color: #303030;
		line-height: 38rpx;
		padding: 30rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top3 .top3-tit text {
		display: inline-block;
	}

	.red {
		font-size: 40rpx;
		font-weight: 700;
		color: #e71d1d;
		line-height: 40rpx;
	}

	.noInfo {
		text-align: center;
		color: #666;
		margin: 50rpx auto;
	}

	.Ticon-zanwushuju {
		font-size: 100rpx;
		color: #666;
		text-align: center;
		display: block;
	}

	.navlist-box {
		display: flex;
		flex-wrap: wrap;

		.nav-item {
			width: 20%;
			text-align: center;
			padding: 10rpx 0px;

			image {
				box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
				border-radius: 50%;
			}

			.title {
				color: #8f8f94;
				font-size: 24rpx;
			}
		}
	}
</style>